<template>
  <input type="button" value="打印此页面" @click="printPdf()" />

  <div style="width: 5480px" id="pdfcontent">
    <div style="display: inline-block; margin-right:20px; margin-bottom:40px;" v-for="cabinet in cabinetDevices" :key="cabinet.name">
      <table>
        <tr>
          <th style="background: dimgray; width: 30px;">id</th>
          <th style="background: dimgray; width: 270px; color: orange">{{cabinet.name}}</th>
          <th style="background: dimgray; width: 30px;">id</th>
        </tr>
        <tbody>
        <tr v-for="row in cabinet.cabinet_high" :key="row">
          <td>{{ -row+cabinetHigh }}</td>
          <td v-if="deviceRow(-row+cabinetHigh,cabinet.devices)" :rowspan="deviceSpan(-row+cabinetHigh,cabinet.devices)" :style="deviceColor(-row+cabinetHigh,cabinet.devices)" :title="deviceTitle(-row+cabinetHigh,cabinet.devices)">{{ deviceRow(-row+cabinetHigh,cabinet.devices) }}</td>
          <td>{{ -row+cabinetHigh }}</td>
        </tr>
        </tbody>
      </table>
    </div>

  </div>

</template>

<script>
import axios from "axios";
import html2pdf from "@/utils/html2pdf"
import moment from "moment";

export default {
  name: "DeviceName",
  data() {
    return {
      // 存储机柜的默认高度+1
      cabinetHigh: 43,
      // 存储api取过来的数据
      cabinetDevices: [],
    };
  },

  methods: {
    // 请求接口获取数据
    listExport() {
      const auth = 'Token ' + sessionStorage.getItem('token');
      axios.post('/api/cab', {},
      {
        headers: {
          'Authorization': auth,
        }
      }).then(res => {
        console.log(res.data.length)
        // 取返回的数据中第一条机柜的高度 + 1,做为机柜高
        this.cabinetHigh = res.data[0].cabinet_high + 1
        // 所有数据
        this.cabinetDevices = res.data

      }).catch(error => {
        console.log(error);
      });
    },
    // 返回设备的名称+ip地址
    deviceRow(row,device){
      // 数据默认为空占位,否则会单元格错乱
      let rowData = " "
      for(let dev of device){
        // 传入的值为-row+43,因为机柜U位是从低到高的,所以最下面是1U,最上面是42U.
        // dev.top是U位结束,dev.bottom是U位的开始.
        // 如果u位的最大值和行号相等,那么就从结束U到开始U合并,并返回合并后的内容.
        if(row === dev.top){
          // 返回正常的数据内容
          rowData = dev.name+" "+dev.ip
        }else if (row < dev.top && row >= dev.bottom){
          // U位的开始到结束的单元格,无数据,这样来取消占位单元格,因为合并的单元格不需要有数据.
          rowData = ""
        }
      }
      // 返回设备信息
      return rowData
    },
    // 返回设备的颜色
    deviceColor(row,device){
      for(let dev of device){
        // 如果u位的最大值和行号相等,那么就从开始U到结束U合并.着色
        if(row === dev.top){
          // 返回背景色
          return "background: " + dev.color
        }
      }
    },
    // 返回设备信息的描述
    deviceTitle(row,device){
      for(let dev of device){
        // 如果u位的最大值和行号相等,那么就从开始U到结束U合并.鼠标悬停显示描述
        if(row === dev.top){
          // 返回描述
          return dev.des
        }
      }
    },
    // 返回table需要向下合并的单元格数量,也就是rowspan
    deviceSpan(row,device){
      for(let dev of device){
        // 如果u位的最大值和行号相等,那么就从开始U到结束U合并.合并table单元格
        if(row === dev.top){
          // u位结束-u位开始+1,用来计算合并的单元格数量
          return dev.top - dev.bottom + 1
        }
      }
    },
    //日期时间
    printMoment(){
      return moment().format('YYYY-MM-DD_HHmmss')
    },
    // html保存成pdf
    printPdf(){
      html2pdf("pdfcontent", "cabinet",this.printMoment())
    }


  },
  created() {
    this.listExport()
  },
  mounted() {
    // 10秒定时刷新
    this.timer = setInterval(() => {
      this.listExport();
    }, this.$store.state.check_time)
  },
  beforeUnmount() {
    clearInterval(this.timer);
  }
};
</script>

<style scoped>
table, tr, td, th {
  border: 4px solid silver;
  text-align:center
}
</style>

